@font-face {
  font-family: AliceInWonderland;
  font-weight: normal; 
  src:url(/Fonts/AliceInWonderland.ttf) format('truetype')
}

@font-face {
  font-family: VampireWars;
  font-weight: normal; 
  src:url(/Fonts/VampireWars.ttf) format('truetype')
}

body {
  background-color: #000000;
  color: #FFFFFF;
}

h1 {
  font-family: VampireWars;
  font-weight: normal;
  font-size: 50pt;
  display: flex;
  justify-content: center;
}

h2 {
  font-family: AliceInWonderland;
  font-weight: normal;
  font-size: 40pt;
  display: flex;
  justify-content: center;
  margin: 10px;
}

.container {
  display: grid;
  grid-template-columns: 1fr; 
  gap: 4px;
  justify-content: center;
}

.event {
  height: auto;
  border: 2px solid #c3c3c3;
  margin: 2px;
  padding: 10px;
  font-family: "Times New Roman", Times, serif;
}

.event::after {
  content: "";
  display: block;
  clear: both;
}

img {
  float: left;
  height:auto;
  width:50%;
  margin:2px;
}

a {
  color: orange;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 30% 30% 30%;
  }
}